<template>
    <div class="modal" :class="{'is-active':active}" >
        <div class="modal-background"></div>
        <div class="modal-card">
            <header class="modal-card-head">
                <p class="modal-card-title"><slot name="title"></slot></p>
                <button class="delete"></button>
            </header>
            <section class="modal-card-body">
                <slot name="body"></slot>
            </section> 
            <footer class="modal-card-foot">
                <a class="button is-success"><slot name="left-button"></slot></a>
                <a class="button" @click="close"><slot name="right-button"></slot></a>
            </footer>
        </div>
    </div>
</template>

<script>
    export default {
        name:'modal',
        props:['active'],
        methods:{
            close(){
                this.$emit('close');
            }
        }
    }
</script>